<template>
  <div class="search-box">
    <div class="left-box">
      <p-row :gutter="16">
        <p-col :span="6">
          <div class="item">
            <span class="item-left">销售组</span>
            <p-select
              class="item-right"
              :value="form.salesGroup"
              placeholder="请选择"
              @change="handleChange($event, 'salesGroup')"
            >
              <p-select-option
                v-for="item in salesGroupOptions"
                :key="item.code"
                :value="item.code"
              >
                {{ item.name }}
              </p-select-option>
            </p-select>
          </div>
        </p-col>
        <p-col :span="6">
          <div class="item">
            <span class="item-left">客户简称</span>
            <div class="item-right">
              <p-input
                v-model="form.customerName"
                placeholder="请输入"
              ></p-input>
            </div>
          </div>
        </p-col>
        <p-col :span="6">
          <div class="item">
            <span class="item-left">Model Name</span>
            <div class="item-right">
              <p-input v-model="form.modelName" placeholder="请输入"></p-input>
            </div>
          </div>
        </p-col>
        <p-col :span="6">
          <div class="item">
            <span class="item-left">机种</span>
            <div class="item-right">
              <p-input
                v-model="form.modelInfoName"
                placeholder="请输入"
              ></p-input>
            </div>
          </div>
        </p-col>
      </p-row>

      <p-row :gutter="16" style="margin-top: 6px">
        <p-col :span="6">
          <div class="item">
            <span class="item-left">应用别</span>
            <p-select
              class="item-right"
              :value="form.application"
              :placeholder="'请选择'"
              :show-arrow="true"
              @change="handleChange($event, 'application')"
            >
              <p-select-option
                v-for="item in applicationOptions"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </p-select-option>
            </p-select>
          </div>
        </p-col>
        <p-col :span="6">
          <div class="item">
            <span class="item-left"> 形态 </span>
            <p-select
              class="item-right"
              :value="form.appearance"
              :placeholder="'请选择'"
              :show-arrow="true"
              @change="handleChange($event, 'appearance')"
            >
              <p-select-option
                v-for="item in appearanceOptions"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </p-select-option>
            </p-select>
          </div>
        </p-col>
        <p-col :span="6">
          <div class="item">
            <span class="item-left"> 生产地 </span>
            <p-select
              class="item-right"
              :value="form.manufactureArea"
              :placeholder="'请选择'"
              :show-arrow="true"
              @change="handleChange($event, 'manufactureArea')"
            >
              <p-select-option
                v-for="item in manufactureAreaOptions"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </p-select-option>
            </p-select>
          </div>
        </p-col>
        <p-col :span="6">
          <div class="item">
            <span class="item-left"> 类别 </span>
            <!-- <div class="item-right">
              <MonthRangPicker
                class="date-box"
                :start.sync="form.startTime"
                :end.sync="form.endTime"
              />
            </div> -->
            <p-select
              class="item-right"
              :value="form.category"
              :placeholder="'请选择'"
              :show-arrow="true"
              @change="handleChange($event, 'category')"
            >
              <p-select-option
                v-for="item in categoryOptions"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </p-select-option>
            </p-select>
          </div>
        </p-col>
      </p-row>
    </div>
    <div class="right-box">
      <p-button
        class="commonbutton"
        style="margin-bottom: 5px; margin-right: 6px;"
        type="primary"
        @click="searchTableList"
      >
        搜索
      </p-button>
      <p-button class="commonbutton" @click="resForm">重置</p-button>
    </div>
  </div>
</template>

<script>
// import MonthRangPicker from '@/components/picker/MonthRangePicker.vue';
// import { postOrganizationInfo } from '@/api/public.js';
// import monent from 'moment';

const defaultForm = {
  currStatus: '',
  salesGroup: '', // 销售组
  customerName: '', // 客户简称
  modelName: '', // model_Name
  modelInfoName: '', // 机种名称
  application: '', // 应用别
  appearance: '', // 形态
  manufactureArea: '', // 生产地
  category: '' // 类别
  // startTime: '',
  // endTime: '',
};
const all = { label: '全部', value: '' };
export default {
  components: {
    // MonthRangPicker,
  },
  data() {
    return {
      form: {
        currStatus: '',
        salesGroup: '', // 销售组
        customerName: '', // 客户简称
        modelName: '', // model_Name
        modelInfoName: '', // 机种名称
        application: '', // 应用别
        appearance: '', // 形态
        manufactureArea: '', // 生产地
        category: '' // 类别
        // startTime: '',
        // endTime: '',
      },
      // orgGroupOptions: [],
    };
  },
  computed: {
    salesGroupOptions() {
      return [{ name: '全部', code: '' }, ...this.getOrgGroupOptions];
    },
    getOrgGroupOptions() {
      const list1 = this.$store.getters.getOrg({
        code: 'ltcorgoled',
        type: 'sales',
        isDict: false,
      });
      const list2 = this.$store.getters.getOrg({
        code: 'ltcorgltps',
        type: 'sales',
        isDict: false,
      });
      let list = [...list1, ...list2]
      // let data = list?.map((item) => {
      //   return {
      //     label: item.name,
      //     value: item.name
      //   }
      // })
      return list
    },
    appearanceOptions() {
      let option = this.$store.state.dictionary.dict['shape'];
      let val = Object.keys(option).map((key) => {
        return {
          label: option[key],
          value: key,
        };
      });
      val.unshift(all);
      return val;
    },
    applicationOptions() {
      let option = this.$store.state.dictionary.dict['application'];
      let val = Object.keys(option).map((key) => {
        return {
          label: option[key],
          value: key,
        };
      });
      val.unshift(all);
      return val;
    },
    manufactureAreaOptions() {
      let option = this.$store.state.dictionary.dict['production_place'];
      let val = Object.keys(option).map((key) => {
        return {
          label: option[key],
          value: key,
        };
      });
      val.unshift(all);
      return val;
    },
    categoryOptions() {
      let option = this.$store.state.dictionary.dict['category'];
      let val = Object.keys(option).map((key) => {
        return {
          label: option[key],
          value: key,
        };
      });
      val.unshift(all);
      return val;
    },
    getSearchParams() {
      return {
        ...this.form,
      };
    },
  },
  watch: {
    // parentId: {
    //   handler(val) {
    //     this.getDicList();
    //   },
    //   immediate: true,
    // },
  },
  created() {
    // this.getDicList();
  },

  methods: {
    salesGroupChange(val) {
      this.form.salesGroup = val;
    },
    applicationChange(val) {
      this.form.application = val;
    },
    appearanceChange(val) {
      this.form.appearance = val;
    },
    manufactureAreaChange(val) {
      console.log(val, '-===-==');
      this.form.manufactureArea = val;
    },
    handleChange(val, key) {
      this.form[key] = val;
    },
    async searchTableList() {
      this.$emit('search');
    },
    // handleOrgChange(val) {
    //   this.form.salesGroup = '';
    //   this.orgGroupOptions = [];
    //   this.parentId = val;
    // },
    // async getDicList() {
    //   const result = await postOrganizationInfo({
    //     code: 'ltcsmsizebu',
    //   });
    //   const orgOptions = result?.data?.data || [];
    //   this.orgGroupOptions = this.calcGroup(orgOptions);
    // },
    // calcGroup(option) {
    //   let arr = [];
    //   option?.forEach(async (item) => {
    //     try {
    //       let data = await postOrganizationInfo({
    //         code: item.code,
    //       });
    //       let optionArr = data?.data?.data || [];
    //       if (optionArr.length) {
    //         let val = optionArr?.map((v) => {
    //           return {
    //             ...v,
    //             label: v.name,
    //             value: v.name,
    //           };
    //         });
    //         let orgOptions = val?.filter((item) =>
    //           item.code?.includes('sales')
    //         );
    //         arr.push(...orgOptions);
    //       }
    //     } catch (err) {
    //       console.log(err);
    //     }
    //   });
    //   // console.log(arr, '123');
    //   return arr;
    // },
    resForm() {
      this.form = { ...defaultForm };
      this.$emit('search', true);
    },
    // async exportExcel() {
    //   const res = await postExportList(this.form);
    //   downloadFile(res.data, '价格明细');
    // },
  },
};
</script>

<style lang="less" scoped>
.right-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}
.search-box {
  display: flex;
  padding: 10px 20px;
  width: 100%;
  background: #f7f7f8;
  border: none;
  margin-bottom: 10px;
  .left-box {
    flex: 6;
    .item {
      display: flex;
      align-items: center;
      .item-left {
        flex: 2;
        padding-right: 8px;
        text-align: end;
      }
      .item-right {
        flex: 3;
      }
    }
  }
}
</style>
